<template>
	<view class="pro">
		<view class="">
			<view class="">
				<slot></slot>
				<view class=""> {{`${obj.now}/${obj.need}`}} </view>
			</view>
		</view>
		<view class="">
			<view class="" :style="{width:left+'rpx'}">
			</view>
			<view class="" :style="{'left':left-8+'rpx'}">
			</view>
		</view>
	</view>
</template>
<script>
	export default ({
		name: 'Pro',
		props: {
			obj: {
				type: Object,
				default: {}
			},
		},
		computed: {
			left() {
				let left = 394 / this.obj.need * this.obj.now
				let str = '';
				(this.obj.now > this.obj.need) ? (str = '394') : (str = left)
				return str
			}
		},
		data() {
			return {}
		}
	})
</script>
<style scoped lang="scss">
	.pro {
		width: 424rpx;
		display: flex;
		flex-direction: column;
		margin-bottom: 20rpx;

		&>view:nth-child(1) {
			// margin-bottom: 10rpx;
			display: flex;
			justify-content: space-between;
			margin-bottom: 10rpx;

			&>view:nth-child(1) {
				width: 100%;
				font-size: 28rpx;
				font-weight: 400;
				color: #341902;
				display: flex;
				justify-content: space-between;

				&>view {
					margin-right: 30rpx;
					font-weight: bold;
				}
			}

			&>view:nth-child(2) {
				font-weight: 400;
				color: #341902;
				font-size: 28rpx;
				display: flex;
				align-items: end;
			}
		}

		&>view:nth-child(2) {
			position: relative;
			width: 394rpx;
			height: 24rpx;
			background: linear-gradient(180deg, #FFDE2E 0%, #FFCB72 100%);
			box-shadow: inset 0rpx 2rpx 6rpx 2rpx rgba(235, 149, 9, 1);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-top: 20rpx;
			display: flex;
			align-items: center;

			&>view:nth-child(1) {
				position: absolute;
				top: 4rpx;
				height: 16rpx;
				background: linear-gradient(180deg, #FF876A 0%, #FF4A20 28%, #FF1616 67%, #CC1106 100%);
				box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(255, 0, 0, 0.75), inset 0rpx 1rpx 1rpx 2rpx rgba(255, 255, 255, 0.68);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				opacity: 1;
			}

			&>view:nth-child(2) {
				position: absolute;
				width: 16rpx;
				height: 16rpx;
				background: #FFFFFF;
				z-index: 99;
				top: 4rpx;
				box-shadow: 0 0 4px 6rpx #FFFFFF;
				border-radius: 100%;
			}
		}
	}
</style>